<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>值的绑定补充</title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id ="app">

        <!--用到v-for的时候
            官方推荐我们用v-for的时候 同时绑定一个key属性，key的作用是高效的更新虚拟DOM元素  
        -->
        <ul>
            <li v-for="item in items" :key="item">{{item}}</li>

        </ul>
       <p>{{msg}}</p>
       <!--数组的相应，vue是响应式，
        data发生变化时，vue自动检测变化，
        然后试图进行渲染
        -->

        <h2>{{name}}</h2>
        <button @Click="btnClick">button</button>

    </div>
    
    <script>
       let app =new Vue({
         el:"#app",
         data:{
           msg:'hello world',
           items:[1,2,3],
           name:['a','b','c']
         },
         mothods:{
            btnClick(){
                //数组响应式
                //通过下标形式进行改变，不是响应式，无法自动触发渲染
                //this.name[0]="dw"
                //数组的响应
                //1.push方法，在数组末尾添加元素


                //2.popo方法，在数组末尾删除元素

                //3.shift方法，在数组开头删除元素

                //4.unshift方法，在数组开头增加新的元素

                //5.splice方法（删除 添加 替换元素）
                // splice（开始的下标 删除个数，追加后面的元素）

                this.name.splice(0,1,'shane')

                // ... --> 扩展符
                //可变参数
                let total =0
                function sum(...item){
                    //es5
                    // for(let i =0;i<item.length;i++){
                    //     total+=item[i]
                    // }

                    
                    return total
                }

                sum(1,2,3,4)
            }
         },
   })
    </script>  
</body>
</html>